<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🐶 页面被吃掉了！</title>
    <style>
        :root {
            --primary: #ff6b6b;
            --secondary: #ff9f9f;
        }

        @font-face {
            font-family: 'CuteFont';
            src: url('//cdn.jsdelivr.net/npm/cute-font@1.0/Chilanka-Regular.woff2') format('woff2');
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'CuteFont', 'Comic Sans MS', cursive;
        }

        body {
            background: linear-gradient(135deg, #fff0f5, #ffe4e1);
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .container {
            text-align: center;
            padding: 2rem;
            max-width: 800px;
            position: relative;
        }

        .error-code {
            font-size: 8rem;
            color: var(--primary);
            text-shadow: 3px 3px 0 #fff;
            margin: 1rem;
            animation: wobble 1.5s ease infinite;
        }

        .emoji-box {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin: 2rem;
        }

        .emoji {
            font-size: 3rem;
            filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.1));
            animation: bounce 2s ease infinite;
        }

        .message {
            font-size: 1.8rem;
            color: #666;
            line-height: 1.6;
            margin: 2rem 0;
            background: rgba(255,255,255,0.95);
            padding: 2rem;
            border-radius: 30px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
            position: relative;
        }

        .message::before {
            content: "💡";
            position: absolute;
            left: -30px;
            top: -30px;
            font-size: 2.5rem;
            animation: sparkle 2s ease infinite;
        }

        .paw-track {
            position: absolute;
            width: 100px;
            opacity: 0.2;
            animation: walk 20s linear infinite;
        }

        .home-link {
            display: inline-flex;
            align-items: center;
            padding: 1rem 3rem;
            background: var(--primary);
            color: white !important;
            text-decoration: none;
            border-radius: 50px;
            transition: 0.3s;
            font-size: 1.5rem;
            box-shadow: 0 5px 15px rgba(255,107,107,0.3);
        }

        .home-link span {
            margin-left: 0.8rem;
        }

        .home-link:hover {
            transform: scale(1.1) rotate(2deg);
            background: #ff5252;
        }

        /* 动画效果 */
        @keyframes wobble {
            0% { transform: rotate(-5deg); }
            50% { transform: rotate(5deg) scale(1.1); }
            100% { transform: rotate(-5deg); }
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        @keyframes walk {
            0% { transform: translateX(-150%) rotate(0deg); }
            100% { transform: translateX(150%) rotate(360deg); }
        }

        @keyframes sparkle {
            0% { transform: scale(1); }
            50% { transform: scale(1.3) rotate(20deg); }
            100% { transform: scale(1); }
        }

        @media (max-width: 768px) {
            .error-code { font-size: 5rem; }
            .message { font-size: 1.3rem; padding: 1.5rem; }
            .emoji { font-size: 2rem; }
        }
    </style>
</head>
<body>
    <!-- 爪印轨迹 -->
    <div class="paw-track" style="top:10%; left:-10%; animation-delay: 1s">🐾</div>
    <div class="paw-track" style="top:30%; right:-10%; animation-delay: 3s">🐾</div>
    <div class="paw-track" style="bottom:20%; left:-15%; animation-delay: 5s">🐾</div>

    <div class="container">
        <div class="error-code">404</div>

        <div class="emoji-box">
            <div class="emoji">😭</div>
            <div class="emoji">🐶</div>
            <div class="emoji">💻</div>
            <div class="emoji">🍖</div>
        </div>

        <div class="message">
            <strong>糟糕！小狗狗把页面啃坏了！</strong><br><br>
            我们的程序猿正在努力抢修中...<br>
            但是好像被骨头🦴分散了注意力<br>
            先回主页玩接飞盘游戏吧！
        </div>

        <a href="/" class="home-link">
            🏡 返回安全基地
            <span>🎾</span>
        </a>
    </div>
</body>
</html>